<template>
    <el-dialog
        title="菜单权限配置"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="450px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :default-checked-keys="checkArr"
            >
            </el-tree>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        roleId: Number,
        resourceIdList: Array
    },
    data () {
        return {
            checkArr: [],
            loading: false,
            showValue: false,
            data: [],
            defaultProps: {
                children: 'list',
                label: 'menuName'
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
                this.getMenu()
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    created () {
    },
    methods: {
        getMenu () {
            this.checkArr = []
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/systemMenuManage/menuTree?id=' + this.roleId, params).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response, '888888888888888888888888888888')
                if (response.ret === '0') {
                    this.data = response.res
                    this.checkArr = this.copyArr(this.resourceIdList)
                }
                if (response.ret !== '0') {
                    console.log('添加失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('调用添加失败')
            })
        },
        // 清空数据
        clearData () {
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        save () {
            console.log(this.$refs.tree.getCheckedKeys())
            this.loading = true
            this.$http.post(this.$store.state.IP + '/systemRoleManage/roleAddResource', {
                menuId: this.$refs.tree.getCheckedKeys(true),
                roleId: this.roleId
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.ret === '0') {
                    this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$emit('getList')
                    this.clearData()
                }
                if (response.ret !== '0') {
                    console.log('保存失败')
                }
            }, response => {
                console.log('调用保存失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap
    height: 400px
    overflow: auto
</style>